import { styled } from '@umijs/max'

export const Container = styled.div`
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 70px auto;
`

export const Side = styled.div`
  grid-row: 1 / 3;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .ant-menu-inline {
    border-inline-end: 0 !important;
  }
`

export const Header = styled.div`
  background-color: #fff;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
`

export const Content = styled.div`
  background-color: #F4F4F4;
  height: 100%;
  overflow: hidden;

  .ant-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .ant-tabs-nav {
    height: 50px;
    margin: 0;
    background-color: #fff;
    border-top: 1px solid var(--ant-diy-border-color);
    padding: 0 16px;
    flex-shrink: 0;
  }

  .ant-tabs-tab {
    margin: 0 !important;
    padding: 0 16px;
  }

  .ant-tabs-content-holder {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
`